<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/common/css_form/password_strength_meter.css');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/common/css_form/catcha_slider.css');

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/assets/javaScript/js_form/password_strength_meter.js',CClientScript::POS_BEGIN);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/assets/javaScript/js_catcha_slider/jquery.ui.touch.js',CClientScript::POS_BEGIN);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/assets/javaScript/js_catcha_slider/QapTcha.jquery.js',CClientScript::POS_BEGIN);

$bool_IE 	= false;
if( strpos( $_SERVER["HTTP_USER_AGENT"], "MSIE" ) !== false ) $bool_IE = true;
?>

<?php
echo $this->renderPartial("leftnav", array());
?>

<!-- ================================== 712 Area - Right Side =========================================================== -->
<div class="grid_712">
	<div class="box box_710 border_box">
		
		<h1>Đăng Ký</h1>
		
		<form
			id		= "frm_register"
			name	= "frm_register"
			action	= "<?=Yii::app()->createUrl("account/register");?>"
			target	= "" 
			method	= "post"
			class	= "form_input"
		>
			<fieldset class="border_radius_all border_outset">
				<input
					id		= "os_query"
					name	= "os_query"
					type	= "hidden"
					value	= "account_register"
				/>
				
				<div class="form_input_row">
					<label class="label_title">Họ và Tên:*</label>
					<input
						id			= "txt_name"
						name		= "txt_name"
						title		= "Họ và tên lót của tên bạn"
						type		= "text"
						value		= ""
						class		= "form_textbox textbox_css3"
						tabindex	= "1"
						onblur		= "validation_onblur(this,'lbl_name_validation')"
					/>
					<label
						id		= "lbl_name_validation" 
						class	= "lable_validation"
					>Bạn chưa nhập họ và tên.</label>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Tên Tài Khoản:*</label>
					<input
						id			= "txt_account"
						name		= "txt_account"
						title		= "Tên Tài khoản Của Bạn"
						type		= "text"
						value		= ""
						class		= "form_textbox textbox_css3"
						onblur		= "validation_onblur(this,'lbl_account_validation')"
						onkeypress  = "return keypress_alphanumberic(event);"
						tabindex	= "3"
					/>
					<label
						id		= "lbl_account_validation" 
						class	= "lable_validation"
					>Bạn chưa nhập tên tài khoản.</label>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Mật Khẩu:*</label>
					<input
						id			= "txt_password"
						name		= "txt_password"
						title		= "Mật Khẩu Của Bạn"
						type		= "password"
						value		= ""
						class		= "form_textbox textbox_css3"
						tabindex	= "4"
					/>
					<div class="input_items_horizon pass_strength">
						<div class="graybar" id="graybar"></div>
						<div class="colorbar" id="colorbar"></div>
						<span class="percent" id="percent">0%</span>
						<span class="result" id='result'></span>
					</div>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Nhập Lại Mật Khẩu:*</label>
					<input
						id			= "txt_confirmation"
						name		= "txt_confirmation"
						title		= "Nhập Lại Mật Khẩu Của Bạn"
						type		= "password"
						value		= ""
						class		= "form_textbox textbox_css3"
						onblur		= "validation_onblur(this,'lbl_confirmation_validation')"
						tabindex	= "5"
					/>
					<label
						id		= "lbl_confirmation_validation" 
						class	= "lable_validation"
					>Bạn chưa nhập xác nhận mật khẩu.</label>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">E-mail*:</label>
					<input
						id			= "txt_email"
						name		= "txt_email"
						title		= "Nhập E-mail Của Bạn"
						type		= "text"
						value		= ""
						class		= "form_textbox textbox_css3"
						onblur		= "txt_email_onblur(this.name,'lbl_email_validation')"
						tabindex	= "5"
					/>
					<label
						id		= "lbl_email_validation" 
						class	= "lable_validation"
					>Bạn chưa nhập E-mail.</label>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Địa Chỉ:</label>
					<textarea 
						id			= "ta_address"
						name		= "ta_address"
						rows		= ""
						cols		= ""
						class		= "form_textarea textarea_css3"
						tabindex	= "6"
					></textarea>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Giới Tính:</label>
					<div class="input_items_horizon">
						<input
							title		= "Nam"
							name		= "ra_sex"
							id			= "ra_sex"
							type		= "radio"
							value		= "0"
							class		= "item_option"
							tabindex	= "7"
						/><label>Nam</label>
						<input
							title		= "Nữ"
							name		= "ra_sex"
							id			= "ra_sex"
							type		= "radio"
							value		= "1"
							class		= "item_option"
							tabindex	= "8"
						/><label>Nữ</label>
					</div>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Ngày Sinh:</label>
					<div class="input_items_horizon" style="padding-top: 0px;">
					
						<select
							id			= "cb_birth_day"
							name		= "cb_birth_day"
							tabindex	= "9"
							<?php
							if ($bool_IE != true)
								echo "class = 'select_css3 select_two_arrown'";
							else
								echo "class = 'combo_box'";
							?>
						>
							<?php for( $i = 1; $i <= 31; $i ++ ) {?>
								<option value="<?=sprintf( "%02d", $i );?>"><?=sprintf( "%02d", $i );?></option>
							<?php } ?>
						</select>
						
						<select
							id		= "cb_birth_month"
							name	= "cb_birth_month"
							tabindex= "10"
							<?php
							if ($bool_IE != true)
								echo "class = 'select_css3 select_two_arrown'";
							else
								echo "class = 'combo_box'";
							?>
						>
							<?php for( $i = 1; $i <= 12; $i ++ ) { ?>
								<option value="<?=sprintf( "%02d", $i );?>"><?=sprintf( "%02d", $i );?></option>
							<?php } ?>
						</select>
						
						<select
							id		= "cb_birth_year"
							name	= "cb_birth_year"
							tabindex= "11"
							<?php
							if ($bool_IE != true)
								echo "class = 'select_css3 select_two_arrown'";
							else
								echo "class = 'combo_box'";
							?>
						>
							<?php for( $i = intval( date( 'Y' ) ); $i > intval( date( 'Y' ) ) - 70; $i -- ) { ?>
								<option value="<?=$i;?>"><?=$i;?></option>
							<?php } ?>
						</select>
					</div>
				</div>
				
				<div class="form_input_row">
					<label class="label_title">Mã Xác Nhận:*</label>
					<div class="input_items_horizon" style="padding-top: 0px;">
						<div id="QapTcha"></div>
					</div>
				</div>
				
				<div class="form_input_row" style="border: none;">
					<div class="input_items_horizon">
						<input
							title		= "gửi yêu cầu"
							name		= "btn_register"
							id			= "btn_register"
							type		= "submit"
							value		= "Đăng ký"
							class		= "input_button button_css3"
							tabindex	= "12"
						/>
					</div>
				</div>
				
			</fieldset>
		</form>
		
	</div><!-- End box_710 -->
</div><!-- End grid_712 -->

<div
	id		= "dialog_excute"
	title	= "Chương trình đang thực thi"
	class	= "dialog_message"
>
	<p class="center">
		<img alt="Loading...." src="<?=Yii::app()->baseUrl;?>/images/image_default/loading_circle.gif" width="92px" height="92px"/>
	</p>
</div> <!--End dialog_excute-->

<script type="text/javascript">

jQuery(document).ready(function() {

    $("#dialog_excute").dialog({
        autoOpen: false,
        closeOnEscape: false,
        width: 220,
        height: 152,
        modal: true,
        resizable: false,
        show: "explode",
        hide: "explode",
        open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
    });
	
	$("#QapTcha").QapTcha({disabledSubmit:true,autoRevert:true});
	
	var bpos = "";
	var perc = 0 ;
	var minperc = 0 ;
	$('#txt_password').css( {backgroundPosition: "0 0"} );
	
	$('#txt_password').keyup(function(){
		$('#result').html(passwordStrength($('#txt_password').val(),$('#txt_account').val())) ; 
		perc = passwordStrengthPercent($('#txt_password').val(),$('#txt_account').val());
		
		bpos=" $('#colorbar').css( {backgroundPosition: \"0px -" ;
		bpos = bpos + perc + "px";
		bpos = bpos + "\" } );";
		bpos=bpos +" $('#colorbar').css( {width: \"" ;
		bpos = bpos + (perc * 2) + "px";
		bpos = bpos + "\" } );";
		eval(bpos);
	    	$('#percent').html(" " + perc  + "% ");
	});

	$('#txt_name').focus();	

	$('#txt_account').change(function() {
		var name_without_space = $("#txt_account").val().replace(/ /g,'');
		var name_without_special_char = name_without_space.replace(/[<>']+/g,'');
		$(this).attr("value", name_without_special_char );
	});

	//attach a submit handler to the form
	$("#frm_register").submit(function(event) {
		
		//stop form from submitting normally
		event.preventDefault();
		
		var bool_submit = form_onsubmit("frm_register");
		if (bool_submit == true) {

			$( "#dialog_excute" ).dialog( "open" ); 

			var	i_day	= $("#cb_birth_day").val(),
				i_month	= $("#cb_birth_month").val(),
				i_year	= $("#cb_birth_year").val();
		
			var d_birth = i_year + "-" + i_month + "-" + i_day;
			var url		= $(this).attr("action");
	
			$.post( url,{
				txt_name		: $("#txt_name").val(),
				txt_account		: $("#txt_account").val(),
				txt_password	: $("#txt_confirmation").val(),
				d_birth			: d_birth,
				ra_sex			: $("input[name='ra_sex']:checked").val(),
				txt_email		: $("#txt_email").val(),
				ta_address		: $("#ta_address").val()
			},function( string ) {
				//alert(string); return;
				var arr_result = $.parseJSON(string);

				if(arr_result.error != null){
					alert(arr_result.error);
					$("#dialog_excute").dialog( "close" );
					return;
				}

				//alert (arr_result.count);
				var i_count = arr_result.result;
				if(i_count == 0)
					alert("Lỗi trong quá trình đăng ký, vui lòng thử lại sau.");
				else
					load_page("<?=Yii::app()->createUrl("account/index");?>");

				$("#dialog_excute").dialog( "close" );
			});

		}//end if (bool_submit == true) {
	});//end form submit
});



function validation_onblur(input_name,lbl_validation) {
	if( input_name.value == ""){
		$('#'+lbl_validation).fadeIn("slow", "linear");
		//$('#'+input_name.name).focus();
	}else if ((input_name.name == "txt_account" || input_name.name == "txt_password" || input_name.name == "txt_confirmation") && input_name.value.length < 4) {
		$('#'+lbl_validation).fadeIn("slow", "linear");
		//$('#'+input_name.name).focus();
	}else {
		$('#'+lbl_validation).fadeOut();
	}
}

function txt_email_onblur(obj,lbl_validation) {
    var temp = $("#" + obj);
    if (!echeck(temp.val())) {
    	$('#lbl_email_validation').fadeIn("slow", "linear");
		$('#lbl_email_validation').text("Bạn nhập E-mail không đúng định dạng.");
        //temp.focus();
        return;
    }else {
		$('#'+lbl_validation).fadeOut();
	}
}


function form_onsubmit(param)
{
	if (document.forms[param].txt_name.value == ""){
		$('#lbl_name_validation').fadeIn("slow", "linear");
		document.forms[param].txt_name.focus();
		return false;
	}
	
	if (document.forms[param].txt_account.value=="" || document.forms[param].txt_account.value.length < 4){
		$('#lbl_account_validation').fadeIn("slow", "linear");
		//$('#lbl_account_validation').text("Bạn phải nhập vào tên tài khoản hơn 4 ký tự");
		document.forms[param].txt_account.focus();
		return false;
	}

	if (document.forms[param].txt_password.value=="" && document.forms[param].txt_password.value.length < 4){
		$('#lbl_password_validation').fadeIn("slow", "linear");
		document.forms[param].txt_password.focus();
		return false;
	}

	if (document.forms[param].txt_confirmation.value==""){
		$('#lbl_confirmation_validation').fadeIn("slow", "linear");
		document.forms[param].txt_confirmation.focus();
		return false;
	}

	if (document.forms[param].txt_confirmation.value != document.forms[param].txt_password.value){
		$('#lbl_confirmation_validation').fadeIn("slow", "linear");
		$('#lbl_confirmation_validation').text("Mật khẩu xác nhận không đúng.");
		document.forms[param].txt_confirmation.focus();
		return false;
	}

	if (document.forms[param].txt_email.value == ""){
		$('#lbl_email_validation').fadeIn("slow", "linear");
		document.forms[param].txt_email.focus();
		return false;
	}

	//var temp = $("#txt_email");
    if (!echeck(document.forms[param].txt_email.value)) {
	//if (!echeck(param.txt_email.value)) {
		$('#lbl_email_validation').fadeIn("slow", "linear");
		$('#lbl_email_validation').text("Bạn nhập E-mail không đúng định dạng.");
		document.forms[param].txt_email.focus();
        return false;
    }
	
	return true;
}
</script>